<template>
  <div class="app-container">
    <div class="search-container">
      <el-input v-model="searchForm.name" class="search-input" placeholder="输入部门名" :clearable="true" />
      <el-button type="primary" icon="el-icon-search" size="small" @click="getList({pageNo: 1})">搜索</el-button>
    </div>
    <div>
      <el-table v-loading="listLoading" :data="list" border fit highlight-current-row style="width: 100%">
        <el-table-column align="center" label="#" width="80" type="index" />

        <el-table-column width="" align="center" label="部门">
          <template slot-scope="scope">
            <span>{{ scope.row.name }}</span>
          </template>
        </el-table-column>

        <el-table-column width="" align="center" label="是否开启加班设置">
          <template slot-scope="scope">
            <span>{{ scope.row.status | filterEnumYesNo }}</span>
          </template>
        </el-table-column>

        <el-table-column width="" align="center" label="加班开始时间">
          <template slot-scope="scope">
            <span>{{ scope.row.beginTime }}</span>
          </template>
        </el-table-column>

        <el-table-column width="" align="center" label="加班结束时间">
          <template slot-scope="scope">
            <span>{{ scope.row.endTime }}</span>
          </template>
        </el-table-column>

        <el-table-column width="" align="center" label="最后操作人">
          <template slot-scope="scope">
            <span>{{ scope.row.operator }}</span>
          </template>
        </el-table-column>

        <el-table-column width="100" align="center" label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="showUpdate(scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination v-show="total>0" :total="total" :page.sync="listQuery.pageNo" :limit.sync="listQuery.pageSize" @pagination="pageChange" />
    </div>
    <!-- todo 调整表单字段 -->
    <el-dialog title="详情" :visible.sync="formData.formDialog" :close-on-click-modal="false">
      <el-form ref="saveForm" :model="formData.props" :rules="formData.rules" label-width="180px">
        <el-form-item label="是否开启加班设置" prop="status">
          <el-switch
            v-model="formData.props.status"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :active-value="1"
            :inactive-value="0"
          />
        </el-form-item>
        <el-form-item label="加班时间开始" prop="beginTimeShow">
          <el-time-picker
            v-model="formData.props.beginTimeShow"
            placeholder="加班时间开始"
          />
        </el-form-item>
        <el-form-item label="加班时间结束" prop="endTimeShow">
          <el-time-picker
            v-model="formData.props.endTimeShow"
            placeholder="加班时间结束"
          />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" :disabled="btnSubmitDisabled" @click="save">确 定</el-button>
        <el-button @click="formData.formDialog = false">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import request from '@/utils/request'

export default {
  name: 'SysNoticeList',
  components: { Pagination },
  data() {
    return {
      btnSubmitDisabled: false,
      list: [],
      total: 0,
      listLoading: true,
      listQuery: {
        pageNo: 1,
        pageSize: 10
      },
      formData: {
        formDialog: false,
        // 表单字段, 请自行删除不需要的
        props: {
          name: '',
          deptId: '',
          status: '',
          beginTime: '',
          endTime: '',
          beginTimeShow: '',
          endTimeShow: ''
        },
        // 表单校验规则, 默认增加了必填, 请自行限制长度或者其他修改
        rules: {
          endTimeShow: this.formRules({ required: true }),
          beginTimeShow: this.formRules({ required: true }),
          status: this.formRules({ required: true })
        }
      },
      searchForm: {}
    }
  },
  created() {
    this.registerFilter('EnumYesNo');
    this.getList({
      pageNo: this.listQuery.pageNo
    })
  },
  methods: {
    pageChange(page) {
      this.getList({
        pageNo: page.page,
        pageSize: page.limit
      })
    },
    getList(params) {
      this.listLoading = true
      request({
        url: '/overtime/overtimeInfo/getMydeptList',
        method: 'post',
        data: {
          pageNo: params.pageNo,
          pageSize: params.pageSize ? params.pageSize : this.listQuery.pageSize,
          ...this.searchForm
        }
      }).then(res => {
        const data = res.data;
        this.list = data.rows;
        this.total = data.total;
        this.listQuery.pageNo = params.pageNo;
        this.listLoading = false;
      }, () => {
        this.listLoading = false;
      })
    },
    showUpdate: function(data) {
      // todo 设置数据进入表单
      this.formData.props = {
        name: data.name,
        deptId: data.deptId,
        beginTime: data.beginTime,
        endTime: data.endTime,
        beginTimeShow: !data.beginTime ? '' : this.getTimeByStr(data.beginTime),
        endTimeShow: !data.endTime  ? '' : this.getTimeByStr(data.endTime),
        status: data.status
      }
      this.formData.formDialog = true;
    },
    save: function() {
      var _this = this;
      this.disableBtn(this, 'btnSubmitDisabled');
      this['$refs'].saveForm.validate(function(valid) {
        console.log(_this.formData.props.status)
        if (!valid && _this.formData.props.status && _this.formData.props.status === 1) {
          return;
        }
        _this.formData.props.beginTime = !_this.formData.props.beginTimeShow ? '' : _this.getTimeStr(_this.formData.props.beginTimeShow)
        _this.formData.props.endTime =  !_this.formData.props.endTimeShow ? '' : _this.getTimeStr(_this.formData.props.endTimeShow)
        // todo 注意构造参数_this.formData.props
        request({
          url: '/overtime/overtimeInfo/save',
          method: 'post',
          data: _this.formData.props
        }).then(res => {
          _this.$message.success('保存成功');
          _this.getList({
            pageNo: 1,
            pageSize: _this.listQuery.pageSize
          });
          _this.formData.formDialog = false;
        })
      });
    },
    getTimeStr(data) {
      let hours = data.getHours();
      let minutes = data.getMinutes();
      let seconds = data.getSeconds();
      // 补齐两位数
      hours = hours < 10 ? '0' + hours : hours;
      minutes = minutes < 10 ? '0' + minutes : minutes;
      seconds = seconds < 10 ? '0' + seconds : seconds;
      return `${hours}:${minutes}:${seconds}`;
    },
    getTimeByStr(data) {
      const parts = data.split(':');
      // 创建一个新的日期对象，设置时间部分。
      const date = new Date();
      date.setHours(parts[0]);
      date.setMinutes(parts[1]);
      date.setSeconds(parts[2]);
      return date
    }
  }
}
</script>

<style scoped>

</style>
